<template>
  <div class="dynamic-typing">
    <p v-html="json.msg"/>
    <!--  分享网页  -->
    <div v-if="type === 56" class="p-2 yu-bgColor-tew-only flex items-center">
      <div class="w-10 h-10 mr-2">
        <img style="width: 100%;height: 100%" :src="json?.resource?.coverImgUrl" alt="">
      </div>
      <span class="flex-1 truncate">{{ json?.resource?.title }}</span>
    </div>
    <div class="bottomActivityInfos">
      <span
          class="yu-titleColor cursor-pointer pr-2"
          v-for="item in bottomActivityInfos"
          :key="item.id"
      >
        #{{ item.name }}#
      </span>
    </div>
    <!--  单曲  -->
    <div v-if="type === 18" class="p-2 yu-bgColor flex">
      <div class="pic-player w-15 h-15 yu-textColor-hover mr-2" @click="getSongDetailFn(json.song.id)">
        <img class="w-full h-full" :src="json.song.album.blurPicUrl" alt="">
        <span class="i-mdi-play-speed inline-block"/>
      </div>
      <div class="content flex flex-col justify-around">
        <span class="yu-textColor-hover" @click="jumpPcSongDetail(json.song.id)">{{ json.song.name }}</span>
        <div>
          <span class="text-xs yu-textColor-hover pr-1 truncate" v-for="item in json.song.artists" :key="item.id"
                @click="jumpPcSongDetail(item.id, true)">{{ item.name }}</span>
        </div>
      </div>
    </div>
    <!--  歌单  -->
    <div v-if="type === 13" class="p-2 yu-bgColor flex">
      <div class="pic-player w-15 h-15 yu-textColor-hover mr-2" @click="getSongDetailFn(json.playlist.id)">
        <img class="w-full h-full" :src="json.playlist.coverImgUrl" alt="">
        <span class="i-mdi-play-speed inline-block"/>
      </div>
      <div class="content flex flex-col justify-around">
        <span class="flex items-center">
          <span class="border-2 mr-1 text-xs text-red-500">歌单</span>
          <span class="yu-textColor-hover" @click="jumpPlayListDetails(json.playlist.id)"
          >
            {{json.playlist.name }}
          </span>
        </span>
        <div class="truncate">
          by <span class="yu-textColor-hover "
                   @click="jumpHomePage(json.playlist.creator.userId)">{{ json.playlist.creator.nickname }}</span>
        </div>
      </div>
    </div>
    <!--  电台节目  -->
    <div v-if="type === 17" class="flex yu-bgColor p-2">
      <div class="pic-player w-15 h-15 yu-textColor-hover mr-2" @click="getSongDetailFn(json.program.id)">
        <img class="w-full h-full" :src="json?.program?.coverUrl" alt="">
        <span class="i-mdi-play-speed inline-block"/>
      </div>
      <div class="content flex flex-col justify-around">
        <span class="yu-textColor-hover" @click="jumpRadioDetail(json.program.id)">{{ json.program.name }}</span>
        <div class="flex">
          <span class="border-2 mr-1 text-xs text-red-500 w-16 text-center h-4">{{ json.program.radio.category }}</span>
          <span class="yu-textColor-hover"
                @click="jumpRadioDetail(json.program.radio.id, true)">{{ json.program.radio.name }}</span>
        </div>
      </div>
    </div>
    <div v-if="type === 28" class="flex yu-bgColor p-2">
      <div class="pic-player w-15 h-15 yu-textColor-hover mr-2" @click="getSongDetailFn(json.djRadio.id)">
        <img class="w-full h-full" :src="json?.djRadio?.picUrl" alt="">
      </div>
      <div class="content flex flex-col justify-around">
        <span class="yu-textColor-hover" @click="jumpRadioDetail(json.djRadio.id, true)">{{ json?.djRadio?.name }}</span>
        <div class="flex">
          <span class="border-2 mr-1 text-xs text-red-500 w-16 text-center h-4">{{ json?.djRadio?.category }}</span>
          <span class="yu-textColor-hover"
                @click="jumpHomePage(json.djRadio.dj.userId)">{{ json?.djRadio?.dj?.nickname }}</span>
        </div>
      </div>
    </div>
<!--  分享评论  -->
    <div v-if="type === 31" class=" yu-bgColor p-2">
      <div class="mb-2">
        <span class="yu-textColor-hover">{{ json.resource.user.nickname }}</span>:
        <span> {{ json.resource.content }}</span>
      </div>
      <div class="yu-textColor-hover text-xs">{{ json.resource.resourceName }}</div>
    </div>
    <!--  展示图片  -->
    <show-big-img :pics="pics" />
  </div>
</template>

<script setup>
import {useStore} from "@/store/index";
import ShowBigImg from '@/components/ShowBigImg/index.vue'
import {useRouter} from "vue-router";


const store = useStore()
const router = useRouter()

// 播放歌曲 || 歌单
const getSongDetailFn = (id) => {
  const obj = {
    // 播放单曲
    18: () => {
      store.getSongDetail(id)
    },
    // 播放歌单
    13: () => {
      store.getPlaylistDetail(id)
    },
    // 17, 28都是播放电台节目
    17: () => {
      store.getProgramDetailPlay(id)
    },
    28: () => {
      store.getProgramDetailPlay(id)
    }
  }
  obj && obj[props.type] && obj[props.type]()
}

// 跳转到歌单详情页
const jumpPlayListDetails = (id) => {
  router.push({
    path: '/play-list-detail',
    query: {
      id
    }
  })
}

// 跳转到当前歌曲的详情
// 跳转到当前歌曲的详情 flag： false跳转到歌曲详情，true跳转到专辑
const jumpPcSongDetail = (id, flag = false) => {
  let path
  if (flag) {
    path = '/artist'
  } else {
    path = '/pc-song-detail'
  }
  router.push({
    path,
    query: {
      id
    }
  })
}

// 跳转到电台节目，和电台 flag:true是电台，false是电台节目
const jumpRadioDetail = (id, flag = false) => {
  let path
  if (flag)
    path = '/dj-radio'
  else
    path = '/radio-program'
  router.push({
    path,
    query: {
      id
    }
  })
}

// 跳转到用户详情
const jumpHomePage = (id) => {
  router.push({
    path: '/user/homepage',
    query: {
      id
    }
  })
}

const props = defineProps({
  // 类型 分享单曲的是歌曲还是其他什么的
  type: {
    type: Number,
    default: 0
  },
  // 发的数据比如信息，还有歌曲信息
  json: {
    type: Object,
    default: {}
  },
  // 类型 #新歌首发#
  bottomActivityInfos: {
    type: Array,
    default: []
  },
  // 发布动态的图片
  pics: {
    type: Array,
    default: []
  }
})


</script>

<style scoped lang="scss">
.pic-player {
  position: relative;
  cursor: pointer;

  > span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
  }
}
</style>
